<template>
    <view class="service-package">
        <header-vue :back="true" title="服务套餐" titPosition="left" titleSize="32rpx" titleColor="#333">
            <template v-slot:btnLt>
                <view class="btn-lt">
                    <view class="btn-lt-item" @click="openRedeemModal">
                        <view class="btn-lt-item-icon">
                            <i class="iconfont icon-duihuan font28"></i>
                            <text class="font24">兑换</text>
                        </view>
                    </view>
                    <view class="btn-lt-item" @click="gotoUrl('/views/mine/myorder')">
                        <view class="btn-lt-item-icon">
                            <u-icon name="order" size="28rpx" color="#DF9824"></u-icon>
                            <text class="font24">订单</text>
                        </view>
                    </view>
                </view>
            </template>
        </header-vue>
        
        <!-- 兑换码弹窗 -->
        <u-popup 
            :show="showRedeemModal" 
            mode="center" 
            :closeOnClickOverlay="true"
            @close="closeRedeemModal"
            :round="20"
        >
            <view class="redeem-modal">
                <view class="modal-header">
                    <view class="header-content">
                        <text class="greeting">Hi!请输入兑换码及密码进行兑换</text>
                    </view>
                    <view class="header-icon">
                        <!-- 装饰图标 -->
                        <image class="header-icon-img" :src="IMAGE_URL + '/static/index/dym_icon.png'" mode="aspectFit"></image>
                    </view>
                </view>
                
                <view class="modal-body">
                    <view class="input-group">
                        <view class="input-item">
                            <view class="input-label">
                                <i class="iconfont icon-duihuan font28"></i>
                            </view>
                            <view class="input-wrapper">
                                <input 
                                    class="input-field" 
                                    v-model="redeemForm.code"
                                    placeholder="兑换码"
                                    maxlength="20"
                                />
                            </view>
                        </view>
                        
                        <view class="input-item">
                            <view class="input-label">
                                <u-icon name="lock" size="28rpx" color="#999"></u-icon>
                            </view>
                            <view class="input-wrapper">
                                <input 
                                    class="input-field" 
                                    v-model="redeemForm.password"
                                    placeholder="密码"
                                    :password="!showPassword"
                                    maxlength="20"
                                />
                                <view class="password-toggle" @click="togglePassword">
                                    <u-icon 
                                        :name="showPassword ? 'eye-off' : 'eye'" 
                                        size="28rpx" 
                                        color="#999"
                                    ></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                
                <view class="modal-footer">
                    <view class="redeem-btn" @click="submitRedeem">
                        <text class="btn-text">立即兑换</text>
                    </view>
                </view>

                <view class="close-btn" @click="showRedeemModal = false">
                    <u-icon name="close" color="#fff" size="40rpx"></u-icon>
                </view>
            </view>
        </u-popup>

        <!-- 服务套餐列表 -->
        <scroll-view 
            class="package-list"
            scroll-y
            :refresher-enabled="true"
            :refresher-triggered="refresherTriggered"
            @refresherrefresh="onRefresh"
            @scrolltolower="onLoadMore"
            :lower-threshold="100"
            refresher-background="transparent"
        >
            <view 
                class="package-card" 
                v-for="(item, index) in packageList" 
                :key="item.id"
                @click="selectPackage(item)"
            >
                <view class="card-image">
                    <u-image 
                        :src="item.image" 
                        class="service-image"
                        mode="aspectFill"
                        width="200rpx"
                        height="200rpx"
                        adius="12rpx"
                    />
                </view>
                <view class="card-content">
                    <view class="service-title">{{ item.title }}</view>
                    <view class="sales-info">已售:{{ item.sales }}</view>
                <view class="price-section">
                    <!-- 价格背景图片 -->
                    <image class="price-bg" :src="IMAGE_URL + '/static/index/q_bg.png'" mode="aspectFill"></image>
                    
                    <view class="price-info">
                        <text class="price">
                            <text class="font24">¥</text>
                            <text class="font32">{{ item.price }}</text>
                            <text class="font24">/{{ item.times }}次</text>
                        </text>
                    </view>
                    <view class="buy-btn" @click.stop="buyNow(item)">
                        <text class="buy-text">抢</text>
                    </view>
                </view>
                </view>
            </view>
            
            <!-- 加载状态 -->
            <view class="loading-status" v-if="loading">
                <u-loading-icon mode="spinner" size="24rpx" color="#999"></u-loading-icon>
                <text class="loading-text">加载中...</text>
            </view>
            
            <!-- 没有更多数据 -->
            <view class="no-more" v-if="noMore && packageList.length > 0">
                <text class="no-more-text">没有更多数据了</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import headerVue from '@/components/header.vue';
import appConfig from '@/config/app.js'

export default {
    components: {
        headerVue
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            packageList: [],
            currentPage: 1,
            pageSize: 10,
            loading: false,
            noMore: false,
            refresherTriggered: false,
            // 兑换码弹窗
            showRedeemModal: false,
            showPassword: false,
            redeemForm: {
                code: '',
                password: ''
            },
            // 模拟数据源
            allData: [
                {
                    id: 1,
                    title: '精选日常保洁两小时10次卡',
                    sales: 260,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 2,
                    title: '精选日常保洁两小时10次卡',
                    sales: 180,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 3,
                    title: '精选日常保洁两小时10次卡',
                    sales: 320,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 4,
                    title: '精选日常保洁两小时10次卡',
                    sales: 150,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 5,
                    title: '精选日常保洁两小时10次卡',
                    sales: 280,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 6,
                    title: '精选日常保洁两小时10次卡',
                    sales: 190,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 7,
                    title: '精选日常保洁两小时10次卡',
                    sales: 340,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                },
                {
                    id: 8,
                    title: '精选日常保洁两小时10次卡',
                    sales: 220,
                    price: 700,
                    times: 10,
                    image: '/static/images/cleaning-service.jpg',
                    description: '专业保洁服务，每次2小时，包含客厅、卧室、厨房、卫生间全面清洁'
                }
            ]
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        gotoUrl(url) {
            uni.navigateTo({
                url: url
            })
        },
        // 加载数据
        loadData(isRefresh = false) {
            if (this.loading) return
            
            this.loading = true
            
            // 模拟API请求
            setTimeout(() => {
                const startIndex = isRefresh ? 0 : (this.currentPage - 1) * this.pageSize
                const endIndex = startIndex + this.pageSize
                const newData = this.allData.slice(startIndex, endIndex)
                
                if (isRefresh) {
                    this.packageList = newData
                    this.currentPage = 2
                } else {
                    this.packageList = [...this.packageList, ...newData]
                    this.currentPage++
                }
                
                // 检查是否还有更多数据
                this.noMore = endIndex >= this.allData.length
                this.loading = false
                
                if (isRefresh) {
                    this.refresherTriggered = false
                }
            }, 1000)
        },
        
        // 下拉刷新
        onRefresh() {
            this.refresherTriggered = true
            this.currentPage = 1
            this.noMore = false
            this.loadData(true)
        },
        
        // 触底加载更多
        onLoadMore() {
            if (this.noMore || this.loading) return
            this.loadData()
        },
        
        // 打开兑换码弹窗
        openRedeemModal() {
            this.showRedeemModal = true
        },
        
        // 关闭兑换码弹窗
        closeRedeemModal() {
            this.showRedeemModal = false
            this.resetRedeemForm()
        },
        
        // 重置兑换表单
        resetRedeemForm() {
            this.redeemForm = {
                code: '',
                password: ''
            }
            this.showPassword = false
        },
        
        // 切换密码显示
        togglePassword() {
            this.showPassword = !this.showPassword
        },
        
        // 提交兑换
        submitRedeem() {
            if (!this.redeemForm.code.trim()) {
                uni.showToast({
                    title: '请输入兑换码',
                    icon: 'none'
                })
                return
            }
            
            if (!this.redeemForm.password.trim()) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                })
                return
            }
            
            // 模拟兑换请求
            uni.showLoading({
                title: '兑换中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                
                // 模拟兑换成功
                if (this.redeemForm.code === 'TEST123' && this.redeemForm.password === '123456') {
                    uni.showToast({
                        title: '兑换成功',
                        icon: 'success'
                    })
                    this.closeRedeemModal()
                } else {
                    uni.showToast({
                        title: '兑换码或密码错误',
                        icon: 'none'
                    })
                }
            }, 2000)
        },
        
        selectPackage(item) {
            // 跳转到套餐详情页
            uni.navigateTo({
                url: `/views/index/service-details?id=${item.id}`
            })
        },
        
        buyNow(item) {
            uni.navigateTo({
                url: `/pages/order/pay?packageId=${item.id}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.service-package {
    width: 100%;
    min-height: 100vh;
    background: #f6f6f6;
}

.btn-lt {
    display: flex;
    align-items: center;

    .btn-lt-item {
        margin-left: 28rpx;
    }

    .btn-lt-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #DF9824;
    }
}

.package-list {
    height: calc(100vh - 88rpx); // 减去header高度
    padding: 20rpx;
    box-sizing: border-box;
}

.package-card {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 28rpx 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-right: 24rpx;
    flex-shrink: 0;
}

.service-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200rpx;
}

.service-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.sales-info {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 16rpx;
}

.price-section {
    position: relative;
    width: 100%;
    height: 56rpx;
    background: #FFF0F0;
    border-radius: 8rpx 16rpx 16rpx 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 28rpx 0 12rpx;
    box-sizing: border-box;
}

.price-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.price-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.price {
    font-size: 32rpx;
    font-weight: 700;
    color: #FF4444;
}

.buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.buy-text {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 600;
    margin-left: 8rpx;
}

.loading-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    color: #999999;
}

.loading-text {
    font-size: 24rpx;
    margin-left: 16rpx;
}

.no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
}

.no-more-text {
    font-size: 24rpx;
    color: #999999;
}

// 兑换码弹窗样式
.redeem-modal {
    position: relative;
    width: 656rpx;
    background: #ffffff;
    border-radius: 20rpx;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 40rpx 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
}

.header-content {
    flex: 1;
}

.greeting {
    font-size: 32rpx;
    color: #333333;
    display: block;
    margin-bottom: 8rpx;
}

.instruction {
    font-size: 26rpx;
    color: #666666;
    line-height: 1.4;
}

.header-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 110rpx;
    height: 104rpx;
}

.header-icon-img {
    width: 110rpx;
    height: 104rpx;
}

.modal-body {
    padding: 0 40rpx 20rpx;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-item {
    display: flex;
    gap: 16rpx;
    height: 84rpx;
    background: #EEFAFF;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin-top: 40rpx;
}

.input-label {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .icon-duihuan {
        color: #999999;
    }
}

.label-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
}

.input-wrapper {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.input-field {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    font-size: 28rpx;
    color: #333333;
    
    &::placeholder {
        color: #999999;
    }
}

.password-toggle {
    padding: 10rpx;
    margin: -10rpx;
}

.modal-footer {
    padding: 20rpx 40rpx 40rpx;
}

.redeem-btn {
    width: 100%;
    height: 84rpx;
    background: #0785CF;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
}

.close-btn {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: -100rpx;
}
</style>